<template>
  <view class="gift-purchase">
    <view class="header">
      <view><uni-status-bar></uni-status-bar></view>

      <view class="search-box flex-cn">
        <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
          <view
            style="width: 100rpx; text-align: center"
            class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
          >
          </view>
        </view>

        <view
          style="
            height: 80rpx;
            line-height: 80rpx;
            font-size: 36rpx;
            font-family: '.PingFang SC, PingFang SC';
            display: flex;
            justify-content: center;
            align-content: center;
            flex: 1;
            color: #000;
            font-weight: 600;
          "
        >
          我的包裹
        </view>
        <view style="width: 320rpx; flex: 1"></view>
      </view>
    </view>

    <view style="padding: 20rpx;">
          
    <!-- <view class="mybox-order-summary">
      <text class="mybox-summary-text">当前订单已拆分成4个包裹，4个已发出</text>
      <text class="mybox-close-icon">×</text>
    </view> -->

    <!-- 已发货 -->
    <view class="mybox-package-list">
      <view v-for="(item, index) in delivery_list" :key="index" class="mybox-package-item">
        <view class="mybox-package-header">
          <view class="mybox-package-title">
            <text class="mybox-icon-box">📦</text>
            <text>包裹 {{ index + 1 }}</text>
          </view>
          <view  class="mybox-package-status" :style="{ color: item.statusColor, fontWeight: item.statusWeight }">
              已发货
            </view>
        </view>


        <!-- <scroll-view class="mybox-package-scroll" scroll-x="true" show-scrollbar="false" enhanced="true" :bounces="false"> -->
            <scroll-view class="mybox-package-scroll" scroll-x="true" style="white-space: nowrap; border-radius: 16rpx;">
          <view class="mybox-product-list">
            <view v-for="(product, productIndex) in item.goods_info" :key="productIndex" class="mybox-product-item">
              <image  mode="aspectFit" lazy-load="true" class="mybox-product-image" :src="product.goods_image" ></image>
              <!-- <text class="mybox-product-name">{{ product.name }}</text> -->
            </view>
          </view>
        </scroll-view>

        <view class="mybox-package-info">
          <text class="mybox-carrier">物流公司：{{ item.express_name }}</text>
          <text class="mybox-update">物流单号：{{ item.express_no }}</text>
        </view>
        
        <view style="display: flex; justify-content: flex-end; align-items: flex-end;">
            <view class="mybox-packge_font">
                <text style="font-size: 12px; color: #E79B1D;" @click="handlerLogistics(item)">查看物流</text>

            </view>
        </view>

      </view>
    </view>

    <!-- 待发货 -->

    <view class="mybox-package-list">
      <view v-for="(item, index) in no_delivery_list" :key="index" class="mybox-package-item">
        <view class="mybox-package-header">
          <view class="mybox-package-title">
            <text class="mybox-icon-box">📦</text>
            <text>包裹 {{ index + 1 + delivery_list.length }}</text>
          </view>
          <view  class="mybox-package-status" :style="{ color: item.statusColor, fontWeight: item.statusWeight }">
              待发货
            </view>
        </view>


        <!-- <scroll-view class="mybox-package-scroll" scroll-x="true" show-scrollbar="false" enhanced="true" :bounces="false"> -->
            <scroll-view class="mybox-package-scroll" scroll-x="true" style="white-space: nowrap; border-radius: 16rpx;">
          <view class="mybox-product-list">
            <!-- v-for="(product, productIndex) in item.goods_info" :key="productIndex"  -->  
            <view class="mybox-product-item">
              <image  mode="aspectFit" lazy-load="true" class="mybox-product-image" :src="item.goods_image" ></image>
              <!-- <text class="mybox-product-name">{{ product.name }}</text> -->
            </view>
          </view>
        </scroll-view>

        <view class="mybox-package-info">
          <text class="mybox-carrier">物流公司：暂无物流信息</text>
          <text class="mybox-update">物流单号：暂无物流单号</text>
        </view>
        
        <view style="display: flex; justify-content: flex-end; align-items: flex-end;">
            <view class="mybox-packge_font">
                <!-- <text style="font-size: 12px; color: #E79B1D;" @click="handlerLogistics(item)">查看物流</text> -->

            </view>
        </view>

      </view>
    </view>

    </view>
  </view>
</template>


<script>
export default {

    data() {
        return {
            merchant_id:1,
            store_id:null,
            order_id:null,
            packages: [
                {
                status: "已签收",
                statusClass: "mybox-status-green",
                carrier: "京东快递",
                update: "您的快件已由【权根菊】代收，感谢您使用京东物流...",
                products: [
                    { name: "智能手机", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "蓝牙耳机", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "充电宝", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "充电宝", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "充电宝", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "充电宝", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "充电宝", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                ]
                },
                {
                status: "已发货",
                statusClass: "mybox-status-orange",
                carrier: "顺丰速运",
                update: "您的快件已从【北京转运中心】发出，准备送往【上海】...",
                products: [
                    { name: "笔记本电脑", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "无线鼠标", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                ]
                },
                {
                status: "运输中",
                statusClass: "mybox-status-blue",
                carrier: "圆通速递",
                update: "您的快件已到达【广州集散中心】，正在分拣中...",
                products: [
                    { name: "运动鞋", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "运动服", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "瑜伽垫", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                ]
                },
                {
                status: "运输中",
                statusClass: "mybox-status-blue",
                carrier: "圆通速递",
                update: "您的快件已到达【广州集散中心】，正在分拣中...",
                products: [
                    { name: "运动鞋", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "运动服", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "瑜伽垫", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                ]
                },
                {
                status: "运输中",
                statusClass: "mybox-status-blue",
                carrier: "圆通速递",
                update: "您的快件已到达【广州集散中心】，正在分拣中...",
                products: [
                    { name: "运动鞋", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "运动服", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                    { name: "瑜伽垫", image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66963e845f2d84750.jpg" },
                ]
                },
            ],
            delivery_list:[],
            no_delivery_list:[],
            order_no:null,
        }
    },

    
    onLoad(options) {
        console.log(options  , 'optionsoptionsoptions')
        this.order_no = options.order_no
        this.store_id = options.store_id
        this.order_id = options.order_id
        this.getBoxinfo()
	},

 

    methods:{
        //后退
        backHome() {
            uni.navigateBack();
        },

        async getBoxinfo(){
            const { status, data } = await this.$request(
                "SmallProgramApi/ShiFu/getOrderLogistics",
                {
                    merchant_id:this.merchant_id,
                    store_id: this.store_id,
                    order_id:this.order_id,
                }
            );

            this.delivery_list = data.delivery
            this.no_delivery_list = data.no_delivery
        },

        handlerLogistics(val){
          // express_order_id
          	uni.navigateTo({
            	url: '/pages/order/logistics/logistics' + `?order_no=${this.order_no}&store_id=${this.order_id}&express_order_id=${val.express_order_id}`
            });
        }

    }

}


</script>


<style lang="scss" scoped>


.header{
    background-color: #fff;
    position: sticky;
    top: 0px;
    z-index: 99;
}
.gift-purchase {
  height: 100vh;  
  overflow-y: auto;  
  width: 100%;
  /* background-color: #F0F2EE; */
  padding-bottom: 24rpx;
  background-color: #f5f5f5
}

.mybox-container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.mybox-header {
  margin-bottom: 20rpx;
}

.mybox-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.mybox-package-list {
  display: flex;
  flex-direction: column;
}

.mybox-package-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.mybox-package-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.mybox-package-title {
  display: flex;
  align-items: center;
}

.mybox-icon-box {
  margin-right: 10rpx;
}

.mybox-package-status {
  font-size: 28rpx;
  font-weight: bold;
}

.mybox-status-green {
  color: #52c41a;
}

.mybox-status-orange {
  color: #ff9900;
}

.mybox-status-blue {
  color: #1890ff;
}

.mybox-package-content {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 20rpx;
}

.mybox-package-scroll {
  display: inline-block;
}

.mybox-product-item {
  display: inline-block;
  width: 120rpx;
  margin-right: 20rpx;
  text-align: center;
}

.mybox-product-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
}

.mybox-product-name {
  display: block;
  font-size: 24rpx;
  color: #333;
  margin-top: 10rpx;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mybox-package-info {
  margin-top: 20rpx;
}

.mybox-carrier,
.mybox-update {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

</style>